<template>
    <view class="paper-body">
        <view class="paper_save" v-if="isPreview">
            <u-button
                type="primary"
                text="保存"
                shape="circle"
                color="#588BF3"
                @click="lookBtn"
            />
        </view>
        <view class="paper-wrapper">
            <view class="paper-onboarding">
                <view class="paper-onboarding-fills" :style="[fillsStyle]">
                    <view
                        v-for="(item, index) in pages"
                        :key="index"
                        class="paper-onboarding-fill"
                        :style="[
                            { backgroundColor: item.style.backgroundColor },
                            fillStyleList[index].fillStyle,
                        ]"
                    />
                </view>
                <z-swiper
                    ref="zSwiper"
                    v-model="pages"
                    :options="options"
                    @beforeInit="init"
                >
                    <z-swiper-item
                        v-for="(item, index) in pages"
                        :key="item.id"
                    >
                        <view
                            class="slide-inner"
                            :style="[$u.addStyle(item.style)]"
                        >
                            <!-- :style="[$u.addStyle(item.style)]" -->
                            <RecursiveComponent
                                :meetId="meetId"
                                :status="status"
                                :componentsData="getPageData(item.id)"
                                :children="item.contents"
                                v-if="item.contents && item.contents.length > 0"
                            />
                        </view>
                    </z-swiper-item>
                </z-swiper>
            </view>
        </view>
    </view>
</template>

<script>
import RecursiveComponent from "../components/RecursiveComponent/index.vue";
import { getPages } from "@/api/invitedCard.js";
import { businessInvitationLetter, update } from "@/api/invitationCardMake";
let editStatus = "";
export default {
    components: {
        RecursiveComponent,
    },
    data() {
        return {
            status: 1,
            id: 0,
            isPreview: 0,
            invitationLetterId: 0,
            meetId: 0,
            letterName: 0,
            templates: [],
            pages: [],
            // templates: [
            //     {
            //         id: "a",
            //         modules: [
            //             {
            //                 id: "a_a_a",
            //                 type: "text",
            //                 config: {
            //                     value: "肠癌检测·健康常伴",
            //                 },
            //             },
            //             {
            //                 id: "a_a_c",
            //                 type: "text",
            //                 config: {
            //                     value: "2024年01月03日",
            //                 },
            //             },
            //             {
            //                 id: "a_a_d",
            //                 type: "text",
            //                 config: {
            //                     value: "浙江省杭州市滨江区阿里中心",
            //                 },
            //             },
            //         ],
            //     },
            //     {
            //         id: "b",
            //         modules: [
            //             {
            //                 id: "b_a_a",
            //                 type: "text",
            //                 config: {
            //                     value: "尊敬的女士/先生：",
            //                 },
            //             },
            //             {
            //                 id: "b_a_b",
            //                 type: "text",
            //                 config: {
            //                     value: "我们公司将在2024年01月03日上午9点整举行肠癌检测·健康常伴分享会。我们深知在发展的道路上离不开您的合作与支持，我们取得成绩中有您的辛勤工作。久久联合，岁岁相长。作为一家成熟专业的公司我们珍惜您的选择，我们愿意与您一起分享对新产品的喜悦与期盼。故在此邀请您参加我们公司举办的新品发布会，与您共话友谊、展望将来。如蒙应允、不胜欣喜。",
            //                 },
            //             },
            //             {
            //                 id: "b_a_c",
            //                 type: "text",
            //                 config: {
            //                     value: "十蜂健康",
            //                 },
            //             },
            //         ],
            //     },
            //     {
            //         id: "c",
            //         modules: [
            //             {
            //                 id: "c_a",
            //                 type: "field",
            //                 config: {
            //                     value: [
            //                         {
            //                             label: "会议名称：",
            //                             text: "肠癌检测·健康常伴",
            //                         },
            //                         {
            //                             label: "开始时间：",
            //                             text: "2024-01-03 15:30",
            //                         },
            //                         {
            //                             label: "结束时间：",
            //                             text: "2024-01-03 15:30",
            //                         },
            //                         {
            //                             label: "主办人：",
            //                             text: "十蜂健康杨医生",
            //                         },
            //                     ],
            //                 },
            //             },
            //         ],
            //     },
            //     {
            //         id: "d",
            //         modules: [
            //             {
            //                 id: "d_a",
            //                 type: "timeline",
            //                 config: {
            //                     value: [
            //                         {
            //                             time: "15:30-15:40",
            //                             text: "会议签到入座",
            //                         },
            //                         {
            //                             time: "15:40-16:20",
            //                             text: "流程名字",
            //                         },
            //                         {
            //                             time: "15:30-15:40",
            //                             text: "流程名字",
            //                         },
            //                         {
            //                             time: "15:30-15:40",
            //                             text: "流程名字",
            //                         },
            //                         {
            //                             time: "15:30-15:40",
            //                             text: "流程名字",
            //                         },
            //                     ],
            //                 },
            //             },
            //         ],
            //     },
            //     {
            //         id: "e",
            //         modules: [
            //             {
            //                 id: "e_a",
            //                 type: "images",
            //                 config: {
            //                     value: [
            //                         "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/23/xxx.png",
            //                         "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/23/xxx.png",
            //                         "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2024/01/23/xxx.png",
            //                     ],
            //                 },
            //             },
            //         ],
            //     },
            //     {
            //         id: "f",
            //         modules: [
            //             {
            //                 id: "f_a_a",
            //                 type: "navigation",
            //                 config: {
            //                     value: "浙江省杭州市滨江区阿里中心",
            //                     longitude: "120.19",
            //                     latitude: "30.19",
            //                 },
            //             },
            //             {
            //                 id: "f_a_b",
            //                 type: "field",
            //                 config: {
            //                     value: [
            //                         {
            //                             label: "会议地址：",
            //                             text: "浙江省杭州市滨江区阿里中心",
            //                         },
            //                         {
            //                             label: "详细地址：",
            //                             text: "微红科技有限公司",
            //                         },
            //                         {
            //                             label: "联系电话：",
            //                             text: "010-5695253566",
            //                         },
            //                     ],
            //                 },
            //             },
            //         ],
            //     },
            // ],
            // pages: [
            //     {
            //         id: "a",
            //         style: {
            //             width: "100vw",
            //             height: "100vh",
            //             display: "flex",
            //             alignItems: "flex-end",
            //             paddingLeft: "60rpx",
            //             paddingBottom: "12vh",
            //             boxSizing: "border-box",
            //             backgroundImage:
            //                 "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/report/other/2024/01/30/29744abb237e45478b57f07b59c6b113.png)",
            //         },
            //         contents: [
            //             {
            //                 id: "a_a",
            //                 type: "view",
            //                 style: {
            //                     width: "calc(100vw - 60rpx)",
            //                     height: "auto",
            //                     display: "flex",
            //                     flexDirection: "column",
            //                 },
            //                 contents: [
            //                     {
            //                         id: "a_a_a",
            //                         type: "text",
            //                         variable: true,
            //                         style: {
            //                             color: "#EACA5C",
            //                             fontSize: "56rpx",
            //                             fontWeight: "bold",
            //                         },
            //                     },
            //                     {
            //                         id: "a_a_b",
            //                         type: "divider",
            //                         attrs: {
            //                             mode: "row",
            //                             lineWeight: "8rpx",
            //                             lineLength: "94rpx",
            //                             lineColor: "#EACA5C",
            //                         },
            //                         style: {
            //                             marginTop: "24rpx",
            //                         },
            //                     },
            //                     {
            //                         id: "a_a_c",
            //                         type: "text",
            //                         variable: true,
            //                         style: {
            //                             color: "#EACA5C",
            //                             fontSize: "36rpx",
            //                             marginTop: "24rpx",
            //                         },
            //                     },
            //                     {
            //                         id: "a_a_d",
            //                         type: "text",
            //                         variable: true,
            //                         style: {
            //                             color: "#EACA5C",
            //                             fontSize: "28rpx",
            //                             marginTop: "24rpx",
            //                         },
            //                     },
            //                 ],
            //             },
            //         ],
            //     },
            //     {
            //         id: "b",
            //         style: {
            //             width: "100vw",
            //             height: "100vh",
            //             paddingLeft: "98rpx",
            //             paddingTop: "27vh",
            //             boxSizing: "borderBox",
            //             backgroundImage:
            //                 "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/report/other/2024/01/30/f83f8cd6d21c4fef97817669e053b05d.png)",
            //         },
            //         contents: [
            //             {
            //                 id: "b_a",
            //                 type: "view",
            //                 style: {
            //                     display: "flex",
            //                     flexDirection: "column",
            //                     width: "652rpx",
            //                     paddingLeft: "40rpx",
            //                     paddingRight: "40rpx",
            //                     boxSizing: "border-box",
            //                     height: "auto",
            //                 },
            //                 contents: [
            //                     {
            //                         id: "b_a_a",
            //                         type: "text",
            //                         variable: true,
            //                         style: {
            //                             width: "572rpx",
            //                             color: "#EACA5C",
            //                             fontSize: "32rpx",
            //                         },
            //                     },
            //                     {
            //                         id: "b_a_b",
            //                         type: "text",
            //                         variable: true,
            //                         style: {
            //                             width: "572rpx",
            //                             color: "#EACA5C",
            //                             fontSize: "32rpx",
            //                             marginTop: "60rpx",
            //                             lineHeight: "62rpx",
            //                         },
            //                     },
            //                     {
            //                         id: "b_a_c",
            //                         type: "text",
            //                         variable: true,
            //                         style: {
            //                             width: "572rpx",
            //                             color: "#EACA5C",
            //                             fontSize: "32rpx",
            //                             marginTop: "60rpx",
            //                             textAlign: "right",
            //                             paddingRight: "20rpx",
            //                             boxSizing: "borderBox",
            //                         },
            //                     },
            //                 ],
            //             },
            //         ],
            //     },
            //     {
            //         id: "c",
            //         style: {
            //             display: "flex",
            //             flexDirection: "column",
            //             justifyContent: "flex-end",
            //             alignItems: "center",
            //             width: "100vw",
            //             height: "100vh",
            //             paddingLeft: "98rpx",
            //             paddingBottom: "30vh",
            //             boxSizing: "borderBox",
            //             backgroundImage:
            //                 "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/report/other/2024/01/30/961d0cf9890c4263bc88c2678969ba27.png)",
            //         },
            //         contents: [
            //             {
            //                 id: "c_a",
            //                 type: "field",
            //                 variable: true,
            //                 style: {
            //                     width: "606rpx",
            //                     color: "#EACA5C",
            //                     fontSize: "56rpx",
            //                 },
            //                 attrs: {
            //                     mode: "row",
            //                     labelSize: "32rpx",
            //                     labelColor: "#EACA5C",
            //                     textSize: "32rpx",
            //                     textColor: "#EACA5C",
            //                 },
            //             },
            //         ],
            //     },
            //     {
            //         id: "d",
            //         style: {
            //             display: "flex",
            //             flexDirection: "column",
            //             alignItems: "center",
            //             width: "100vw",
            //             height: "100vh",
            //             paddingLeft: "98rpx",
            //             paddingTop: "28vh",
            //             boxSizing: "borderBox",
            //             backgroundImage:
            //                 "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/report/other/2024/01/30/45d3051800c241b780bc6f5c781d7058.png)",
            //         },
            //         contents: [
            //             {
            //                 id: "d_a",
            //                 type: "timeline",
            //                 variable: true,
            //                 style: {
            //                     fontSize: "32rpx",
            //                     color: "#EACA5C",
            //                 },
            //             },
            //         ],
            //     },
            //     {
            //         id: "e",
            //         style: {
            //             display: "flex",
            //             flexDirection: "column",
            //             alignItems: "center",
            //             width: "100vw",
            //             height: "100vh",
            //             paddingLeft: "98rpx",
            //             paddingTop: "24vh",
            //             boxSizing: "borderBox",
            //             backgroundImage:
            //                 "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/report/other/2024/01/30/a413ce906ed44acd9ba335bcaaa86674.png)",
            //         },
            //         contents: [
            //             {
            //                 id: "e_a",
            //                 type: "images",
            //                 variable: true,
            //                 attrs: {
            //                     imageWidth: "606rpx",
            //                     imageHeight: "352rpx",
            //                 },
            //                 style: {
            //                     width: "606rpx",
            //                     height: "740rpx",
            //                 },
            //             },
            //         ],
            //     },
            //     {
            //         id: "f",
            //         style: {
            //             display: "flex",
            //             width: "100vw",
            //             height: "100vh",
            //             paddingTop: "24vh",
            //             boxSizing: "borderBox",
            //             backgroundImage:
            //                 "url(https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/report/other/2024/01/30/310ed8679be84a588d2be395ea57b09e.png)",
            //         },
            //         contents: [
            //             {
            //                 id: "f_a",
            //                 type: "view",
            //                 style: {
            //                     width: "650rpx",
            //                     marginLeft: "98rpx",
            //                     display: "flex",
            //                     flexDirection: "column",
            //                     alignItems: "center",
            //                 },
            //                 contents: [
            //                     {
            //                         id: "f_a_a",
            //                         variable: true,
            //                         type: "navigation",
            //                         style: {
            //                             width: "606rpx",
            //                             height: "326rpx",
            //                             marginTop: "20rpx",
            //                         },
            //                     },
            //                     {
            //                         id: "f_a_b",
            //                         variable: true,
            //                         type: "field",
            //                         style: {
            //                             width: "606rpx",
            //                             color: "#EACA5C",
            //                             fontSize: "56rpx",
            //                             marginTop: "32rpx",
            //                         },
            //                         attrs: {
            //                             mode: "column",
            //                             labelSize: "36rpx",
            //                             labelColor: "#EACA5C",
            //                             textSize: "32rpx",
            //                             textColor: "#EACA5C",
            //                         },
            //                     },
            //                 ],
            //             },
            //             {
            //                 id: "f_b",
            //                 type: "form",
            //                 attrs: {
            //                     buttonDefaultText: "报名",
            //                     buttonTextSize: "30rpx",
            //                     buttonTextColor: "#FFF",
            //                     buttonColor: "#EACA5C",
            //                 },
            //             },
            //         ],
            //     },
            // ],
            options: {
                effect: "creative",
                direction: "vertical",
                speed: 500,
                resistanceRatio: 0,
                grabCursor: true,
                pagination: {
                    el: false,
                    clickable: true,
                    dynamicBullets: true,
                },
                creativeEffect: {
                    progressMultiplier: 2,
                    prev: {
                        opacity: 0,
                        // translate: direction === 'vertical' ? [0, -128, 0] : [-128, 0, 0],
                        translate: [0, "-50%", 0],
                    },
                    next: {
                        opacity: 0,
                        // translate: direction === 'vertical' ? [0, 128, 0] : [128, 0, 0],
                        translate: [0, "50%", 0],
                    },
                },
            },
            fillsStyle: {},
            fillStyleList: [
                {
                    fillStyle: {},
                },
                {
                    fillStyle: {},
                },
                {
                    fillStyle: {},
                },
                {
                    fillStyle: {},
                },
                {
                    fillStyle: {},
                },
                {
                    fillStyle: {},
                },
            ],
        };
    },
    mounted() {
        this.calcFillSize("vertical");
    },

    onLoad(options) {
        this.id = options.id;
        this.isPreview = options?.isPreview ?? 0;
        editStatus = options?.type ?? "";
        // 预览状态 status3是预览=== isPreview=1 是预览进入
        this.status = options?.isPreview ? 3 : "";
        this.getData();
    },
    computed: {
        getPageData() {
            return function (pageID) {
                return this.templates.find((item) => item.id === pageID);
            };
        },
    },
    methods: {
        async lookBtn() {
            // 编辑状态 type=1 是编辑进入
            const params = editStatus
                ? {
                      config: JSON.stringify({ templates: this.templates }),
                      id: this.id,
                      status: 1,
                  }
                : {
                      invitationLetterId: this.invitationLetterId,
                      letterName: this.letterName,
                      status: 1,
                      isPreview: 0,
                      config: JSON.stringify({ templates: this.templates }),
                      meetId: this.meetId,
                  };
            console.log(
                editStatus,
                "objetemplatestemplatestemplatesct :>> ",
                this.templates
            );
            let { code } = editStatus
                ? await update(params)
                : await businessInvitationLetter(params);
            if (code === 200) {
                await uni.$u.toast("保存成功！");
                uni.navigateBack({ delta: editStatus ? 2 : 3 });
            }
        },

        async getData() {
            const result = await getPages(this.id);
            const { previewConfig, config } = result;
            const parseResult = (await this.isPreview)
                ? JSON.parse(result.data.previewConfig)
                : JSON.parse(result.data.config);
            console.log(2222, parseResult);
            this.pages = parseResult.pages;
            this.templates = parseResult.templates;
            this.letterName = result.data.letterName;
            this.meetId = result.data.meetId;
            this.invitationLetterId = result.data.invitationLetterId;

            this.fillStyleList =
                this.pages &&
                this.pages.map((item) => {
                    return {
                        fillStyle: {},
                    };
                });
        },
        init() {
            this.$refs.zSwiper.swiper.on("setTranslate", (swiper) => {
                this.onTranslate(swiper);
            });
            this.$refs.zSwiper.swiper.on(
                "setTransition",
                (swiper, duration) => {
                    this.onTransition(swiper, duration);
                }
            );
        },
        onTranslate(swiper) {
            const { slides } = swiper;

            for (let i = 0; i < slides.length; i += 1) {
                const slideEl = slides[i];
                const slideProgress = slideEl.progress;
                const progress =
                    1 - Math.max(Math.min(Math.abs(slideProgress), 1), 0);
                if (slideProgress < 0) {
                    this.$set(
                        this.fillStyleList[i].fillStyle,
                        "transform",
                        `scale(${progress})`
                    );
                } else {
                    this.$set(
                        this.fillStyleList[i].fillStyle,
                        "transform",
                        `scale(1)`
                    );
                }
            }
        },
        onTransition(swiper, duration) {
            this.fillStyleList.forEach((fillEl) => {
                this.$set(
                    fillEl.fillStyle,
                    "transitionDuration",
                    `${duration}ms`
                );
            });
        },
        calcFillSize(direction) {
            const res = uni.getSystemInfoSync();
            let offsetWidth = res.screenWidth;
            let offsetHeight = res.screenHeight;
            const radius =
                ((offsetWidth / 2) ** 2 + (offsetHeight / 2) ** 2) ** 0.5;
            this.fillsStyle = {
                width: `${radius * 4}px`,
                height: `${radius * 4}px`,
                marginLeft:
                    direction === "vertical"
                        ? `-${radius * 2}px`
                        : `-${radius}px`,
                marginTop:
                    direction === "vertical"
                        ? `-${radius}px`
                        : `-${radius * 2}px`,
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.paper-body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    color: #fff;
    line-height: 1.5;
    font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial,
        "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    .paper_save {
        width: 198rpx;
        position: absolute;
        right: 30rpx;
        bottom: 80rpx;
        z-index: 10;
    }

    .paper-wrapper {
        height: 100vh;

        .slide-inner {
            // padding: 16px;
        }

        .slide-image {
            width: 128px;
            height: 128px;
        }

        .slide-title {
            font-size: 28px;
            font-weight: bold;
            margin: 24px 0;
        }

        .slide-text {
            font-size: 18px;
        }

        .paper-onboarding {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            --swiper-theme-color: #fff;

            .swiper-pagination-bullet {
                background: #fff;
            }

            ::v-deep .swiper {
                width: 100%;
                height: 100%;
                z-index: 1;
            }

            .slide-inner {
                // display: flex;
                // flex-direction: column;
                // align-items: center;
                // justify-content: center;
                // width: 100%;
                // height: 100%;
                // box-sizing: border-box;
                // text-align: center;
                background-position: top;
                background-repeat: no-repeat;
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .paper-onboarding-fills {
                left: 50%;
                top: 50%;
                z-index: 0;
            }

            .paper-onboarding-fills,
            .paper-onboarding-fill {
                position: absolute;
                pointer-events: none;
                width: 100%;
                height: 100%;
            }

            .paper-onboarding-fill {
                left: 0;
                top: 0;
                transform-origin: center center;
                border-radius: 50%;
            }
        }
    }
}
</style>
